<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - Row Expansion</span>
        <span>A row can be expanded to display extra content by enabling expandableRows property and providing a row ng-template.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars" expandableRows="true">
        <p-column expander="true" styleClass="col-icon"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <ng-template let-car pTemplate="rowexpansion">
            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-3" style="text-align:center">
                        <i class="fa fa-search" (click)="showCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i>
                        <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
                    </div>
                    <div class="ui-grid-col-9">
                        <div class="ui-grid ui-grid-responsive ui-grid-pad">
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Vin: </div>
                                <div class="ui-grid-col-10">{{car.vin}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Year: </div>
                                <div class="ui-grid-col-10">{{car.year}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Brand: </div>
                                <div class="ui-grid-col-10">{{car.brand}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Color: </div>
                                <div class="ui-grid-col-10">{{car.color}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataTable>
    
    <p-dialog header="Car Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="true" width="250">
        <div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="vin" class="label">Vin</label></div>
                <div class="ui-grid-col-8">{{selectedCar.vin}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand" class="label">Year</label></div>
                <div class="ui-grid-col-8">{{selectedCar.year}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand" class="label">Brand</label></div>
                <div class="ui-grid-col-8">{{selectedCar.brand}}</div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="color" class="label">Color</label></div>
                <div class="ui-grid-col-8">{{selectedCar.color}}</div>
            </div>
        </div>
    </p-dialog>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablerowexpansiondemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablerowexpansiondemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableRowExpansionDemo implements OnInit &#123;

    cars: Car[];
    
    cols: any[];
    
    selectedCar: Car;
    
    dialogVisible: boolean;
    
    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
        
        this.cols = [
            &#123;field: 'vin', header: 'Vin'&#125;,
            &#123;field: 'year', header: 'Year'&#125;,
            &#123;field: 'brand', header: 'Brand'&#125;,
            &#123;field: 'color', header: 'Color'&#125;
        ];
    &#125;
    
    showCar(car: Car) &#123;
        this.selectedCar = car;
        this.dialogVisible = true;
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatablerowexpansiondemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablerowexpansiondemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars" expandableRows="true"&gt;
    &lt;p-column expander="true" styleClass="col-icon"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
    &lt;ng-template let-car pTemplate="rowexpansion"&gt;
        &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
            &lt;div class="ui-grid-row"&gt;
                &lt;div class="ui-grid-col-3" style="text-align:center"&gt;
                    &lt;i class="fa fa-search" (click)="showCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;
                    &lt;img src="assets/showcase/images/demo/car/{{car.brand}}.png"&gt;
                &lt;/div&gt;
                &lt;div class="ui-grid-col-9"&gt;
                    &lt;div class="ui-grid ui-grid-responsive ui-grid-pad"&gt;
                        &lt;div class="ui-grid-row"&gt;
                            &lt;div class="ui-grid-col-2 label"&gt;Vin: &lt;/div&gt;
                            &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="ui-grid-row"&gt;
                            &lt;div class="ui-grid-col-2 label"&gt;Year: &lt;/div&gt;
                            &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="ui-grid-row"&gt;
                            &lt;div class="ui-grid-col-2 label"&gt;Brand: &lt;/div&gt;
                            &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="ui-grid-row"&gt;
                            &lt;div class="ui-grid-col-2 label"&gt;Color: &lt;/div&gt;
                            &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dataTable&gt;

&lt;p-dialog header="Car Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="true" width="250"&gt;
    &lt;div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar"&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="vin" class="label"&gt;Vin&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;{{selectedCar.vin}}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="brand" class="label"&gt;Year&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;{{selectedCar.year}}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="brand" class="label"&gt;Brand&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;{{selectedCar.brand}}&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="color" class="label"&gt;Color&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;{{selectedCar.color}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/p-dialog&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>